<template>
  <div class="mer" v-if="this.$store.state.count" ref="mer">
    <div>
      <section class="mer-head">
        <h2>粥品香坊（大运村）</h2>
        <div>
          <el-rate
            v-model="value"
            disabled
            text-color="#ff9900"
            score-template="{value}">
          </el-rate>
          <span>(661) 月销量690单</span>
        </div>
        <i></i>
        <section class="mer-pri">
          <div>
            <h3>起送价</h3>
            <div>{{shangjia.minPrice}}<span>元</span></div>
          </div>
          <em></em>
          <div>
            <h3>商家配送</h3>
            <div>{{shangjia.deliveryPrice}}<span>元</span></div>
          </div>
          <em></em>
          <div>
            <h3>平均配送时间</h3>
            <div>{{shangjia.deliveryTime}}<span>元</span></div>
          </div>
        </section>
      </section>
      <div class="guodu"></div>
      <section class="mer-bo">
        <h2>公告与活动</h2>
        <p>{{shangjia.bulletin}}</p>
        <ul class="hdong">
          <li v-for="(item1,index1) in shangjia.supports" :key="index1">
            <img :src="'../../../static/img/'+item1.typea" alt="">
            <span>{{item1.description}}</span>
          </li>
          <!--<li>-->
          <!--<img src="../../../static/img/special_1@2x.png" alt="">-->
          <!--<span>在线支付满28减5</span>-->
          <!--</li>-->
        </ul>
      </section>
      <div class="guodu"></div>
      <section class="mer-bkg">
        <h2>商家实景</h2>
        <div class="heng" ref="heng">
          <ul>
            <li v-for="(item,index) in shangjia.pics" :key="index">
              <img :src="item" alt="">
            </li>
          </ul>
        </div>
      </section>
      <div class="guodu"></div>
      <section class="mer-msg">
        <h2>商家信息</h2>
        <ul>
          <li v-for="(item,index) in shangjia.infos" :key="index">{{item}}</li>
        </ul>
      </section>
    </div>
  </div>
</template>

<script>
import Better from 'better-scroll'
export default {
  name: 'mer',
  data () {
    return {
      value: 4
    }
  },
  computed: {
    shangjia () {
      // console.log(1)
      return this.$store.state.count.seller
    }
  },
  created () {
    setTimeout(() => {
      this.mer = new Better(this.$refs.mer)
      this.heng = new Better(this.$refs.heng, {
        scrollX: true
      })
    })
  }
}
</script>

<style scoped lang="less">
  .mer {
    position: fixed;
    overflow: hidden;
    width: 100%;
    top: 0;
    bottom: 0;
    margin-top: 3.48rem;
    margin-bottom: 1rem;
    box-sizing: border-box;
    .mer-head {
      padding: 0.36rem;
      border-bottom: #7e8c8d solid 0.02rem;
      h2 {
        font-size: 0.28rem;
        color: rgb(7, 17, 27);
        line-height: 0.28rem;
      }
      & > div {
        margin-top: 0.16rem;
        display: flex;
        align-items: center;
        .el-rate {
          display: inline-block;
          line-height: 0.1rem;
          height: 0.4rem;
        }
        span {
          font-size: 0.28rem;
          color: rgb(7, 17, 27);
          line-height: 0.2rem;
        }
      }
      i {
        display: inline-block;
        width: 100%;
        height: 0.02rem;
        background: rgba(7, 17, 27, 0.4);
      }
      .mer-pri {
        display: flex;
        justify-content: space-around;
        padding: 0.36rem;
        padding-bottom: 0;
        em {
          display: block;
          height: 0.8rem;
          width: 0.02rem;
          background: black;
        }
        & > div {
          text-align: center;
          h3 {
            font-size: 0.2rem;
            color: rgb(147, 153, 159);
            line-height: 0.2rem;
          }
          div {
            margin-top: 0.08rem;
            font-size: 0.48rem;
            font-weight: 200;
            color: rgb(7, 17, 27);
            line-height: 0.48rem;
            span {
              font-size: 0.24rem;
            }
          }
        }
      }
    }
    .guodu {
      height: 0.5rem;
      background: rgba(7, 17, 27, 0.4);
      /*border-bottom:0.02rem solid rgba(7,17,27,) ;*/
    }
    .mer-bo {
      padding: 0.36rem;
      h2 {
        font-size: 0.28rem;
        line-height: 0.28rem;
      }
      p {
        padding: 0.24rem;
        word-break: break-all;
        word-wrap: break-word;
        font-size: 0.24rem;
        line-height: 0.48rem;
        color: rgb(240, 20, 20);
      }
      .hdong {
        li {
          border-top: rgb(7, 17, 27, 0.4) 0.02rem solid;
          display: flex;
          align-items: center;
          padding: 0.32rem;
          img {
            /*height: 0.24rem;*/
            /*width: 0.24rem;*/
            vertical-align: middle;
          }
          span {
            margin-left: 0.12rem;
            font-size: 0.24rem;
            font-weight: 200;
            color: rgb(7, 17, 27);
          }
        }
      }
    }
    .mer-bkg {
      padding: 0.36rem;
      h2 {
        font-size: 0.28rem;
        line-height: 0.28rem;
        padding-bottom: 0.24rem;
      }
      .heng{
        overflow: hidden;
        position: relative;
        height:1.8rem;
        width: 100%;
        ul {
          position: absolute;
          display: flex;
          li {
            width: 3.5rem;
            height: 1.8rem;
            background: red;
            margin-right: 0.12rem;
            img{
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
    .mer-msg {
      padding: 0.36rem;
      h2 {
        font-size: 0.28rem;
        line-height: 0.28rem;
        padding-bottom: 0.24rem;
      }
      ul {
        li {
          padding: 0.32rem 0.24rem;
          font-size: 0.24rem;
          font-weight: 200;
          color: rgb(7, 17, 27);
          line-height: 0.32rem;
          border-top: #7e8c8d 0.02rem solid;
        }
      }
    }
  }
</style>
